<template>
  <div>
    <div class="main">
      <div class="anime1Area">
        <div id="anime_ex1">
          <div id="lbl_right"></div>
        </div>
        <div class="rotate">
          <img src="~assets/img/experiment/rotate.png" style="width: 40px" alt="">
          <span style="color:#fff">按住左键拖动改变视角;拖拽无人机可调整其位置,拖拽后可调整其坐标</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {EventBus} from 'assets/js/experiment/ex1/eventBus'
import {getPos, savePos, changeOneStatus} from "network/experiment/experiment";
import {checkCrash, checkH} from "@/utils/experiment/ex1/ex1";
import {AnimePlay, clickPosChange} from "@/utils/experiment/ex1/AnimePlay";

export default {
  name: "ex1_right",
  data() {
    return {
      planenum: 0,
      safe: 200,
      loading: null,
    }
  },
  created() {
    this.loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    getPos(1)
      .then(res => {
        this.planeArr = res.data.planeArr
        this.$nextTick(function () {
          AnimePlay(this)
        })
      })
  },
  computed: {
    choose_num: {
      get() {
        return this.$store.state.ex1.choose_num
      },
      set(value) {
        this.$store.commit('changeEx1Choose', value)
      }
    },
    plane_x: {
      get() {
        return this.$store.state.ex1.plane_x
      },
      set(value) {
        this.$store.commit('changeEx1PlaneX', value)
      }
    },
    plane_y: {
      get() {
        return this.$store.state.ex1.plane_y
      },
      set(value) {
        this.$store.commit('changeEx1PlaneY', value)
      }
    },
    plane_z: {
      get() {
        return this.$store.state.ex1.plane_z
      },
      set(value) {
        this.$store.commit('changeEx1PlaneZ', value)
      }
    },
    planeArr: {
      get() {
        return this.$store.state.ex1.planeArr
      },
      set(value) {
        let index = 0
        let tableData = []
        for (let plane of value) {
          plane['x'] = parseInt(plane['x'])
          plane['y'] = parseInt(plane['y'])
          plane['z'] = parseInt(plane['z'])
          index++;
          tableData.push({
            planeNo: index,
            posx: parseInt(plane['x']),
            posy: parseInt(plane['y']),
            posz: parseInt(plane['z']),
          })
        }
        this.planenum = index
        this.$store.commit('changeEx1TableData', tableData)
        this.$store.commit('changeEx1PlaneArr', value)
      }
    }
  },
  methods: {
    // 检测是否通过
    check() {
      let crash = checkCrash(this.planeArr, this.safe);
      if (crash.crash === true) {
        let message = "PL" + crash.index1 + "和PL" + crash.index2 + "间的距离小于安全距离"
        this.$alert(message, '提示', {
          center: true,
          confirmButtonText: '确定'
        })
        return false;
      }
      let isH = checkH(this.planeArr);
      if (isH === false) {
        let message = "目前的编队不像H形状哦"
        this.$alert(message, '提示', {
          center: true,
          confirmButtonText: '确定'
        })
        return false;
      }
      return true;
    },
    save() {
      if (this.check()) {
        savePos(this.$store.state.ex1.planeArr)
          .then(res => {
            changeOneStatus(1, 2)
              .then(res => {
                let message = "恭喜你完成实验！"
                this.$alert(message, '提示', {
                  confirmButtonText: '确定',
                  center: true,
                  callback: action => {
                    this.closeExperiment()
                  }
                })
              })
          })
      }
    },
    poschange() {
      let tmpPlaneArr = this.planeArr;
      tmpPlaneArr[this.$store.state.ex1.choose_num - 1].x = this.$store.state.ex1.plane_x;
      tmpPlaneArr[this.$store.state.ex1.choose_num - 1].y = this.$store.state.ex1.plane_y;
      tmpPlaneArr[this.$store.state.ex1.choose_num - 1].z = this.$store.state.ex1.plane_z;
      this.planeArr = tmpPlaneArr
      clickPosChange(this)
    },
    closeExperiment() {
      this.$emit('changeExperimentNo', 0)
    },
  },
  mounted() {
    EventBus.$on('ex1_poschange', res => {
      this.poschange()
    })
    EventBus.$on('finish', res => {
      this.save()
    })
  },
  beforeDestroy() {
    EventBus.$off('ex1_poschange')
    EventBus.$off('finish')
  }
}
</script>

<style scoped>
@import "../../../assets/css/experiment/ex1/ex1_right.css";
</style>
